<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <script src="../lib/layui/layui.js"></script>
  <script src="../lib/JQuery.js"></script>

  <style>
    html,
    body {
      height: calc(100% - 2px);
      width: 100%;
    }
    .right-top{
      padding: 20px;
      width: 1000px;
      margin: 0 auto;
    }
    .imgouter{
      position: relative;
    }
    .imgtest{
      position: absolute;
      bottom: 10px;
      right: 30px;
      color: #babcba;
      font-size: 16px;
      z-index: 1;
    }

  </style>
</head>

<body>
  <div class="headTitle">
    单一地块
  </div>
  <div  class="sideListout" >
    <div class="leftBox">
      <div id="test1"></div>
      <div class="hidden">
        <div class="sanjiao" state="false"></div>
      </div>
    </div>
    <div class="rightBox">
      <div class="right-top">
        <div class="layui-carousel" id="test2">
          <div carousel-item>
            <div class="imgouter">
               <img>
               <div class="imgtest">时间：2019-10-10  叶龄：10</div>
            </div>
            <div class="imgouter">
              <img>
              <div class="imgtest">时间：2019-10-10  叶龄：10</div>
            </div>
            <div class="imgouter">
              <img>
              <div class="imgtest">时间：2019-10-10  叶龄：10</div>
            </div>
            <div class="imgouter">
              <img>
              <div class="imgtest">时间：2019-10-10  叶龄：10</div>
            </div>
            <div class="imgouter">
              <img>
              <div class="imgtest">时间：2019-10-10  叶龄：10</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right=bottom">
        <div class="tableOuter">
          <div class="headTitle">
            列表
          </div>
          <table id="demoTable" lay-filter="test"></table>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script>
  layui.use(['table'], function () {
    var table = layui.table;
    //第一个实例
    table.render({
      elem: '#demoTable',
      //					height: 315
      //  ,url: '/demo/table/user/' //数据接口
      //						,
      page: true //开启分页
        ,
      cols: [
        [ //表头
          /*{
            field: 'dkmc',
            title: '地块名称',
            align: 'center',
            width: '13%'
          }, {
            field: 'cjsj',
            title: '种植作物',
            align: 'center',
            width: '13%',
            sort: true
          }, {
            field: 'sbid',
            title: '叶龄',
            align: 'center',
            width: '13%'
          }, {
            field: 'sblx',
            title: '分蘖数',
            align: 'center',
            width: '13%'
          }, {
            field: 'gz',
            title: '叶片长度',
            width: '12%',
            sort: true,
            align: 'center',
          }, {
            field: 'kqsd',
            title: '叶片宽度',
            width: '12%',
            sort: true,
            align: 'center',
          }, {
            field: 'trsf',
            title: '叶面积',
            width: '12%',
            sort: true,
            align: 'center',
          }, {
            field: 'trwd',
            title: '光合面积',
            width: '12%',
            sort: true,
            align: 'center',
          }*/
            {
                field: 'dkmc',
                title: '序号',
                width:'10%',
                align: 'center',
                fixed: 'left'
            }, {
            field: 'sbid',
            title: '叶龄',
            width:'15%',
            align: 'center',
        }, {
            field: 'kqsd',
            title: '叶长',
            width:'15%',
            align: 'center',
        }, {
            field: 'sblx',
            title: '分蘖数',
            width:'20%',
            align: 'center',
        }, {
            field: 'trwd',
            title: '有效光合面积',
            align: 'center',
            width:'20%',
        },
            {
                field: 'gz',
                title: '叶色(饱和度)',
                align: 'center',
                width:'10%',
            },
            {
                field: 'gz',
                title: '叶色(色度)',
                align: 'center',
                width:'10%',
            }
        ]
      ],
      data: [{ // 表格数据
        "id": "<div><input type='checkbox'></div>",
        "dkmc": "地块",
        "cjsj": "男",
        "sbid": "浙江杭州",
        "sblx": "人生恰似一场修行",
        "gz": "116",
        "kqsd": "116",
        "trsf": "地块",
        "trwd": "男",
        "dcdl": "浙江杭州",
        "dy": "人生恰似一场修行",
        "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }]
    });
  });
  layui.use(['tree', 'util'], function () {
    var tree = layui.tree,
      layer = layui.layer,
      util = layui.util,
      nodes = [{ // 树分支数据
        title: '江西',
        id: 1,
        children: [{
          title: '南昌',
          id: 1000,
          children: [{
            title: '青山湖区',
            id: 10001
          }, {
            title: '高新区',
            id: 10002
          }]
        }, {
          title: '九江',
          id: 1001
        }, {
          title: '赣州',
          id: 1002
        }]
      }, {
        title: '广西',
        id: 2,
        children: [{
          title: '南宁',
          id: 2000
        }, {
          title: '桂林',
          id: 2001
        }]
      }, {
        title: '陕西',
        id: 3,
        children: [{
          title: '西安',
          id: 3000
        }, {
          title: '延安',
          id: 3001
        }]
      }]
    tree.render({
      elem: '#test1',
      data: nodes,
      showCheckbox: true,
      oncheck: function (obj) { //勾选时触发获取勾选数据
        alert(obj)
      },
      showLine: false //是否开启连接线
    });

  });
  layui.use('carousel', function () {
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
      elem: '#test2',
      width: '100%' //设置容器宽度
        ,
      arrow: 'always' //始终显示箭头
      //,anim: 'updown' //切换动画方式
    });
  });
</script>
<script src="../js/index.js"></script>